<template>
	<view class="query_area">
		<!-- <uni-collapse accordion="true" v-for="(val,index) in areaList[0]" :key="val.id" @change="changeArea(val,1,index)">
		            <uni-collapse-item :title="val.name + ' ' + (val.count? '(该区域已被代理)':'')" showAnimation style="border: none;">
		                <uni-collapse accordion="true" v-if="areaindex == index" v-for="(val,index1) in areaList[1]" :key="val.id" @change="changeArea1(val,2,index1)">
		                    <uni-collapse-item :title="val.name + ' ' + (val.count? '(该区域已被代理)':'')" showAnimation style="border: none;">
		                        <uni-collapse accordion="true" v-if="areaindex1 == index1" v-for="(val,index2) in areaList[2]" :key="val.id" @change="changeArea2(val,3,index2)">
		                          <view style="padding: 30rpx;">
		                                    {{val.name}}
											<text style="color: #999; font-size: 24rpx; margin-left: 40rpx;"> {{val.count? '( 该区域已被代理 )':''}} </text>
		                           </view> 
		                        </uni-collapse>
		                    </uni-collapse-item> 
		                </uni-collapse>
		            </uni-collapse-item> 
		        </uni-collapse> -->
		<view style="width: 100vw; height: 100rpx; color: #90ad5a; line-height: 100rpx;">请选择查询条件</view>
		<view class="area_list">
			<view class="list_province" @click="changeArea(0)">
				<text>{{itemProvince}}</text>
				<image class="area_img" src="../../static/images/xialax.png" mode=""></image>

				<scroll-view scroll-y class="area_list__child" v-show="currentDropDown[0]">
					<view class="child_list" v-for="item in provinceList" :key="item.id" @click="(() => {itemProvince = item.name, areaId = item.id, cityCode = item.area_code})">
						<text>{{item.name}}</text>
					</view>
				</scroll-view>
			</view>
			<view class="list_city" @click="changeArea(1)">
				<text>{{itemCity}}</text>
				<image class="area_img" src="../../static/images/xialax.png" mode=""></image>

				<scroll-view scroll-y class="area_list__child" v-show="currentDropDown[1]">
					<view class="child_list" v-for="item in cityList" :key="item.id"
					 @click="(() => {itemCity = item.name, areaId = item.id, areaCode = item.area_code})"
					>
						<text>{{item.name}}</text>
					</view>
				</scroll-view>
			</view>

			<view class="list_area" @click="changeArea(2)">
				<text>{{itemArea}}</text>
				<image class="area_img" src="../../static/images/xialax.png" mode=""></image>

				<scroll-view scroll-y class="area_list__child" v-show="currentDropDown[2]">
					<view class="child_list" v-for="item in areaList" :key="item.id"
					 @click="(() => {itemArea = item.name, areaId = item.id, areaCode = item.area_code})"
					>
						<text>{{item.name}}</text>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 查询按钮 -->
		<view class="query_btn">
			<text @click="getInquireList">查询</text>
			<text @click="resetArea">重置</text>
		</view>
		<view style="width: 100vw; height: 100rpx; color: #90ad5a; line-height: 100rpx; border-top: 20rpx solid #f5f5f5;">查询结果</view>
		
		<!-- 查询列表 -->
		<view class="query_area_list" v-if="agencyAreaList.info">
			<view class="qua_tit">
				<text class="qua_tit_fl">{{agencyAreaList.info.name}}</text>
				<view class="qua_tit_fr"> <text style="margin-right: 20rpx;">{{agencyAreaList.info.agency_level}}</text> <text>{{agencyAreaList.info.nickname}}</text> </view>
			</view>
			
			<scroll-view scroll-y style="max-height: 800rpx;">
				<view class="qua_item" v-for="item in agencyAreaList.data":style="{background:(item.nickname == '暂无合伙人'? '#f5f5f5':'')}">
					<text style="margin-right: 10rpx;">{{agencyAreaList.info.name}}</text>
					<text>{{item.name}}</text>
					<text>{{item.nickname}}</text>
				</view> 
			</scroll-view>
		</view>
	</view>
</template>

<script>
	// import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'
	// import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue' 

	import {
		getAllPro,
		getInquire
	} from '@/api/user.js'

	export default {
		components: {
			// uniCollapse,
			// uniCollapseItem
		},
		data() {
			return { 
				parent_code: null,
				// 第几层数据
				indexitem: 0,
				// 第一层
				areaindex: 0,
				// 第二层
				areaindex1: 0,
				open: false,

				// 省
				itemProvince: '请选择省份',
				provinceList: [],
				// 市
				itemCity: '请选择城市',
				cityList: [],
				// 区县
				itemArea: '请选择区县',
				areaList: [],
				// 当前下拉开启
				currentDropDown: [false, false, false],
				// 城市id
				areaId: 0,
				// 市 code
				cityCode: null,
				// 区县code
				areaCode: null,
				// 代理区域
				 agencyAreaList: {}
			};
		},
		onShow() {},
		methods: {
			changeArea(index) {
				
				if(index == 0 && !this.currentDropDown[index]){
					// 清除市的数据
					this.cityList = []
					this.areaCode = null
					this.itemCity = '请选择城市'
					uni.showLoading()
					getAllPro(0).then(res => {
						if (res.data.status == 200) {
							uni.hideLoading()
							this.provinceList = res.data.result
						}
					}) 
				}else if (index == 1 && this.itemProvince != '请选择省份' && !this.currentDropDown[index]){ 
					
					// 清除区的数据
					this.areaList = [] 
					this.itemArea = '请选择区县'
					
					uni.showLoading()
					getAllPro(this.cityCode).then(res => {
						if (res.data.status == 200) {
							uni.hideLoading()  
							this.cityList = res.data.result
						}
					})  
				}else if (index == 2 && this.itemCity != '请选择城市' && !this.currentDropDown[index]){ 
					uni.showLoading()
					getAllPro(this.areaCode).then(res => {
						if (res.data.status == 200) {
							uni.hideLoading()  
							this.areaList = res.data.result
						}
					})
				}
				this.currentDropDown[index] = !this.currentDropDown[index]
				this.$forceUpdate()
				
				// switch (index) {
				// 	case 0: 
				// 			uni.showLoading()
				// 			getAllPro(0).then(res => {
				// 				if (res.data.status == 200) {
				// 					uni.hideLoading()
				// 					this.provinceList = res.data.result
				// 				}
				// 			}) 
				// 		break;

				// 	case 1: 
				// 		uni.showLoading()
				// 		getAllPro(this.areaCode).then(res => {
				// 			if (res.data.status == 200) {
				// 				uni.hideLoading()  
				// 				this.cityList = res.data.result
				// 			}
				// 		})  
				// 	case 2: 
				// 		uni.showLoading()
				// 		getAllPro(this.areaCode).then(res => {
				// 			if (res.data.status == 200) {
				// 				uni.hideLoading()  
				// 				this.areaList = res.data.result
				// 			}
				// 		})
				// } 
				// this.currentDropDown[index] = !this.currentDropDown[index]
				// this.$forceUpdate()
			},

			getInquireList() {
				getInquire(this.areaId).then(res => { 
					if(res.data.status == 200){
						this.agencyAreaList = res.data.result 
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			// 重置数据
			resetArea(){
				this.itemProvince = '请选择省份',
				this.itemCity = '请选择城市',
				this.itemArea = '请选择区县',
				this.provinceList = [],
				this.cityList = [],
				this.areaList = [],
				this.areaId = 0,
				this.areaCode = null,
				this.agencyAreaList = {}
			}
			
			// changeArea(e,indexitem,areaindex){  
			// 	// indexitem 第几层的数据
			// 	// areaindex 当前省的下标   
			// 	this.areaindex = areaindex
			// 	this.open = !this.open
			// 	this.parent_code = e.area_code
			// 	this.getAllPro(indexitem)
			// },
			// changeArea1(e,indexitem,aeraindex){
			// 	this.areaindex1 = aeraindex
			// 	this.parent_code = e.area_code
			// 	this.getAllPro(indexitem)
			// }, 

			// getAllPro(index=0){
			// 	let parent_code = this.parent_code
			// 	getAllPro(parent_code).then(res => {
			// 		if(res.data.status == 200){ 
			// 			this.areaList[index] = res.data.result 
			// 			this.$forceUpdate() 
			// 		} 
			// 	})
			// }
		}
	}
</script>

<style lang="less">
	.query_area {
		height: 100vh;
		padding: 0 20rpx;
		background-color: #fff;
		.area_list {

			.list_province,
			.list_city,
			.list_area {
				position: relative;
				display: flex;
				justify-content: space-between;
				padding: 0 40rpx;
				margin-bottom: 20rpx;
				height: 100rpx;
				line-height: 100rpx;
				border: 2rpx solid #c8c8c8;
				border-radius: 15rpx;

				.area_list__child {
					position: absolute;
					top: 110rpx;
					left: -1rpx;
					width: 101%;
					background-color: #fff;
					height: 800rpx;
					z-index: 10;
					border: none;

					.child_list {
						margin: 0 40rpx;
						height: 80rpx;
						line-height: 80rpx;
						border-bottom: 1rpx solid #eee;
					}
				}

				.area_img {
					margin: auto 0;
					width: 24rpx;
					height: 24rpx;
				}
			}
		}

		.query_btn {
			display: flex;
			padding: 30rpx;

			text {
				flex: 1;
				text-align: center;
				height: 100rpx;
				line-height: 100rpx;
				color: #fff;
				background-color: #53b061;
				border-radius: 10rpx;
			}

			& text:nth-child(1) {
				margin-right: 10rpx;
			}

			& text:nth-child(2) {
				background-color: #fff;
				color: #999;
				border: 2rpx solid #c8c8c8;
				
			}
		}
		.query_area_list{
			.qua_tit{
				display: flex;
				justify-content: space-between;
				padding: 0 20rpx;
				height: 80rpx;
				line-height: 80rpx;
				background-color: #fff;
				.qua_tit_fr{
					font-size: 24rpx;
					color: #b9b9b9;
				}
			}
			.qua_item{
				padding: 0 30rpx;
				margin-top: 10rpx;
				height: 140rpx;
				line-height: 140rpx;
				border-radius: 4rpx;
				background-color: #c5e191;
				& text:last-child{
					position: relative;
					float: right;
					font-size: 24rpx;
					&::before{
						position: absolute;
						left: -20rpx;
						top: 66rpx;
						content:'';
						width: 12rpx;
						height: 12rpx;
						background-color: #ca5151;
						border-radius: 50%;
					}
				}
			}
		}






		// .area_list{
		// 	display: flex;
		// 	flex-wrap: wrap;
		// 	justify-content: space-between;
		// 	padding: 0 20rpx;
		// 	min-height: 90rpx;
		// 	line-height: 90rpx;
		// 	border: 1rpx solid #e9e9eb;
		// 	.area_list_img{
		// 		margin: auto 0;
		// 		width: 30rpx;
		// 		height: 30rpx;
		// 	}
		// 	.area_item{
		// 		display: flex; 
		// 		justify-content: space-between;
		// 		width: 100vw;
		// 	}
		// }
	}

	.openarea {
		transform: rotate(180deg);
	}
</style>
